<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button @click="setCurrent(tableData[1])" type="primary">NEW</el-button>
      <el-button @click="setCurrent()" type="danger">RESET</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'childrenArticle', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="articleName" label="文章" sortable width="300">
        <template #default="scope">
          <router-link
            :to="{ path: `/plat/${scope.row.id}`}"
            class="link-style"
            >{{ scope.row.articleName }}</router-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="status" label="发布状态" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '已发布' : '草稿' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="tag" label="标签" width="220">
        <template #default="scope">
          <el-tag
            :key="tag['id']"
            v-for="tag in scope.row.tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag['name'] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="author" label="作者" width="150"> </el-table-column>
      <el-table-column prop="visibility" label="是否公开" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.visibility === 'Y' ? 'success' : 'danger'">
            {{ scope.row.visibility === 'Y' ? 'PUL' : 'PRI' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Search Article Info" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { getArticleList } from '../../../api/blog/article';

  const tableData = ref([]);
  // ----------------调用API-----------------
  const getArticles = async () => {
    await getArticleList().then((res) => {
      tableData.value = res.data;
      console.log(tableData.value);
    });
  };

  // ----------------生命周期控制-----------------
  onMounted(() => {
    getArticles();
  });
</script>

<style scoped>
  .link-style {
    text-decoration: none;
    color: #409eff;
    font-weight: 600;
  }
</style>
